<template>
  <div class="info-nav">
    <div class="route-info text-overflow">
      <span v-html="System.info.currentRouter"></span>
    </div>
    <div class="lang-info text-overflow">
        <span>{{$i18n.locale === 'cn'? "语言":"language"}}</span>
        <span> / </span>
        <span>{{$i18n.locale === 'cn'? "简体中文":"English"}}</span>
    </div>
    <div class="lang-toggle text-overflow">
        <el-button @click="changeLang('cn')" size="mini">简体中文</el-button>
        <el-button @click="changeLang('en')" size="mini">English</el-button>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
export default {
  name:'info-nav',
  data () {
    return {
        
    };
  },
  computed:{
    ...mapGetters(["System"])
  }, 
  components: {},
  created() {},
  mounted() {},
  methods: {
    changeLang(lang){
        this.$i18n.locale = lang;
        sessionStorage.setItem('lang',lang);
    }
  }
}

</script>
<style scoped>
    .info-nav{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background-color: #F2F9FD;
        border-bottom:1px solid #b5cfc9;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .route-info{
      padding: 0 20px;
    }
    .lang-info{
      padding: 0 40px;
    }
</style>